<template>
  <view class="detail-view">
    <u-form label-width="150" :model="form" ref="uForm">
      <view class="form-model-view">
        <u-form-item label="单据编号">
          <view class="form-value">{{ detail_data.no }}</view>
        </u-form-item>
        <u-form-item label="收款单位">
          <view class="form-value">{{ detail_data.customerName }}</view>
        </u-form-item>
        <u-form-item label="当前应收">
          <view class="form-value">{{
            $utils.formattedNumber(detail_data.receivable)
          }}</view>
        </u-form-item>
        <u-form-item label="收款人">
          <view class="form-value">{{ detail_data.operatorName }}</view>
        </u-form-item>
        <u-form-item label="收款时间">
          <view class="form-value">{{
            $u.timeFormat(detail_data.createTime, "yyyy-mm-dd")
          }}</view>
        </u-form-item>
        <u-form-item label="所属店铺">
          <view class="form-value">{{ detail_data.shopName }}</view>
        </u-form-item>
        <u-form-item label="单据状态">
          <view class="form-value">
            <text class="success-status" v-if="detail_data.auditStatus === 2"
              >已审核</text
            >
            <text class="warning-status" v-else>待审核</text>
          </view>
        </u-form-item>
      </view>
      <view class="detail-ul">
        <view
          class="detail-li"
          v-for="(item, index) in detail_data.receiptRequisitionAccountDate"
          :key="index"
        >
          <view class="title">{{ statusText(item.settlementMethod) }}</view>
          <view class="other-ul">
            <view class="other-li"
              >收款：{{ $utils.formattedNumber(item.collectionAmount) }}</view
            >
            <view class="other-li"
              >优惠：{{ $utils.formattedNumber(item.preferentialAmount) }}</view
            >
            <view class="other-li">
              实收：
              <text class="money">{{
                $utils.formattedNumber(item.actualAmount)
              }}</text>
            </view>
          </view>
          <view class="remark">备注：{{ item.remark || "无" }}</view>
        </view>
      </view>
    </u-form>
    <view class="detail-bottom" v-if="detail_data.auditStatus !== 2">
      <view
        class="handel-btn"
        v-if="$accessCheck($Access.auditApplyReceipt)"
        @click="openModel('确定要审核通过该收款申请单吗？', '审核')"
        >审核</view
      >
      <view
        class="handel-btn"
        v-if="$accessCheck($Access.editApplyReceipt)"
        @click="goPage(`/pagesT/Finance/AddApplyReceipt?id=${id}`)"
        >编辑</view
      >
    </view>
    <u-modal
      v-model="model_show"
      :show-cancel-button="true"
      :content="model_content"
      @confirm="modelConfirm"
      @cancel="modelCancel"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      model_tag: "",
      model_show: false,
      model_content: "",
      pay_type_list: [
        {
          value: 1,
          label: "当面现金",
        },
        {
          value: 2,
          label: "私人微信",
        },
        {
          value: 3,
          label: "私人支付宝",
        },
        {
          value: 4,
          label: "私人银行卡",
        },
        {
          value: 5,
          label: "公司公户",
        },
        {
          value: 6,
          label: "公司微信",
        },
        {
          value: 7,
          label: "公司支付宝",
        },
        {
          value: 8,
          label: "公司银行卡",
        },
      ],
      add_form: {
        title: "",
        provinceCode: "",
        cityCode: "",
        districtCode: "",
        address: "",
        realName: "",
        mobile: "",
        enableStatus: 5,
        sex: 0,
        phone: "",
        position: "",
        email: "",
        remark: "",
        accountName: "",
        bankName: "",
        bankCard: "",
      },
      id: "",
      detail_data: [],
    };
  },
  onLoad(options) {
    this.id = options.id;
  },
  onShow() {
    this.getReceiptRequisitionInfo();
  },
  onPullDownRefresh() {
    this.getReceiptRequisitionInfo();
  },
  methods: {
    getReceiptRequisitionInfo() {
      this.$u.api.getReceiptRequisitionInfo(this.id).then((res) => {
        this.detail_data = res.data;
      });
    },
    statusText(val) {
      const data = this.pay_type_list.find((item) => item.value === val);
      if (data) {
        return data.label;
      } else {
        return "其他";
      }
    },
    // 打开提示框
    openModel(content, tag) {
      this.model_content = content;
      this.model_show = true;
      this.model_tag = tag;
    },
    modelConfirm() {
      switch (this.model_tag) {
        case "审核":
          this.updateReceiptRequisitionStatus();
          break;
      }
    },
    updateReceiptRequisitionStatus() {
      this.$u.api
        .updateReceiptRequisitionStatus({
          id: this.id,
          createTime: this.detail_data.createTime,
        })
        .then((res) => {
          this.$u.toast("操作成功");
          this.getReceiptRequisitionInfo();
        });
    },
  },
};
</script>

<style lang="scss">
.detail-ul {
  .detail-li {
    width: 710rpx;
    margin: 20rpx auto;
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 24rpx;
    .title {
      font-weight: bold;
    }
    .other-ul {
      display: flex;
      padding-top: 20rpx;
      .other-li {
        flex: 3;
        font-size: 24rpx;
        text-align: center;
        .money {
          font-size: 28rpx;
          font-weight: bold;
          color: $uni-color-error;
        }
        &:first-child {
          text-align: left;
        }
        &:last-child {
          text-align: right;
        }
      }
    }

    .remark {
      border-top: 1px solid #eeeeee;
      padding-top: 20rpx;
      margin-top: 20rpx;
    }
  }
}
.handel-btn {
  border: 1px solid #fb5904 !important;
  background-color: #fb5904 !important;
}
</style>
